<template>
  <div class="container" style="margin-top: 20px">
    <form @submit.prevent="submit($event)">
      <div class="form-group">
        <label>博客编号</label>
        <input
          type="text"
          readonly
          class="form-control"
          id="id"
          v-model="blog.BlogId"
        />
      </div>

      <!-- 标题 -->
      <ValidationProvider
        rules="min:4|required"
        :bails="false"
        v-slot="{ classes, errors }"
      >
        <div class="form-group" :class="classes">
          <label>文章标题</label>
          <input
            v-model="blog.Title"
            type="text"
            class="form-control"
            id="title"
            name="title"
            placeholder="Title"
          />
          <p>{{ errors[0] }}</p>
        </div>
      </ValidationProvider>

      <!-- 类型 -->
      <ValidationProvider rules="enum" v-slot="{ classes, errors }">
        <div class="form-group" :class="classes">
          <label>文章类型</label>
          <select
            v-model="blog.article_Type"
            class="custom-select mr-sm-2"
            id="inlineFormCustomSelect"
          >
            <option :value="-1">请选择...</option>
            <option :value="0">文章</option>
            <option :value="1">项目</option>
          </select>
          <p>{{ errors[0] }}</p>
        </div>
      </ValidationProvider>

      <!-- 是否可见 -->
      <div class="form-group row">
        <div class="col-sm-2">是否可见</div>
        <div class="col-sm-10">
          <div class="form-check">
            <input
              v-model="blog.Visibility"
              class="tgl tgl-ios"
              type="checkbox"
              id="gridCheck"
            />
            <label class="tgl-btn" for="gridCheck"></label>
          </div>
        </div>
      </div>

      <!-- 选择图片 -->
      <div class="form-group">
        <label>封面图片</label>
        <InputUploadImg @transmitName="getCoverName"></InputUploadImg>
      </div>

      <!-- 简介 -->
      <div class="form-group">
        <label>简介</label>
        <textarea class="form-control" v-model="blog.Introduction"></textarea>
      </div>

      <!-- 内容 -->
      <div class="form-group">
        <label>文章内容</label>
        <Markdown :msg="blog.Content" @input="msg => this.blog.Content = msg"></Markdown>
      </div>
      <button type="submit" class="btn btn-primary">发布</button>
      <p v-bind:key="err.code" v-for="err in errs" class="text-danger">
        {{ err }}
      </p>
    </form>
    <Prompt ref="prompt"></Prompt>
  </div>
</template>

<script>
import axios from "axios";
import Prompt from "../Prompt";
import InputUploadImg from "../input/input_upload_Img";
import Markdown from "../input/markdown";

export default {
  name: "Edit",
  data() {
    return {
      selectItem: [{}],
      errs: "",
      image: "",
      imageResult: "需要更换请选择图片....",
    };
  },
  props: ["blog"],
  components: {
    Prompt,
    InputUploadImg,
    Markdown,
  },
  methods: {
    // getfile: function (event) {
    //   this.image = event.target.files[0];
    //   this.imageResult = "请等待上传成功....";

    //   let config = {
    //     headers: { "Content-Type": "multipart/form-data" },
    //   }; //添加请求头

    //   let param = new FormData();
    //   param.append("image", this.image, this.image.name);

    //   axios
    //     .post("/api/Blog/UploadImage", param, config)
    //     .then((res) => {
    //       this.imageResult = "上传成功";
    //       this.blog.Cover = res.data;
    //       // window.console.log(res.data);
    //     })
    //     .catch((err) => {
    //       if (err.response.status == "401") {
    //         //如果返回码位401 则说明登录失效 退出登录
    //         sessionStorage.removeItem("token");
    //       }
    //       this.errs = err.response.data.errors;
    //       // window.console.log(err.response.data);
    //       this.imageResult = "上传失败";
    //       this.$refs.prompt.alertDia(
    //         err.response.data.status + ":" + err.response.data.title
    //       );
    //     });
    // },
    getCoverName(name) {
      this.blog.Cover = name;
    },
    submit: function (event) {
      event.preventDefault();

      axios
        .put("/api/Blog/" + this.blog.BlogId, this.blog)
        .then((res) => {
          this.$refs.prompt.alertDia("修改成功");
        })
        .catch((err) => {
          this.errs = err.response.data.errors;
          window.console.log(err.response.data);
          // window.console.log(this.blog);
        });
    },
  },
  mounted() {},
};
</script>

<style scoped>
.is-invalid input {
  border: 1px #eb0600 solid;
  color: #eb0600;
}
.is-invalid select {
  border: 1px #eb0600 solid;
}

.is-invalid p {
  color: #eb0600;
}
.is-valid input {
  border: 1px #28a745 solid;
}
.is-valid select {
  border: 1px #28a745 solid;
}

/* checkbox */
.tgl {
  display: none;
}
.tgl,
.tgl:after,
.tgl:before,
.tgl *,
.tgl *:after,
.tgl *:before,
.tgl + .tgl-btn {
  box-sizing: border-box;
}
.tgl::-moz-selection,
.tgl:after::-moz-selection,
.tgl:before::-moz-selection,
.tgl *::-moz-selection,
.tgl *:after::-moz-selection,
.tgl *:before::-moz-selection,
.tgl + .tgl-btn::-moz-selection {
  background: none;
}
.tgl::selection,
.tgl:after::selection,
.tgl:before::selection,
.tgl *::selection,
.tgl *:after::selection,
.tgl *:before::selection,
.tgl + .tgl-btn::selection {
  background: none;
}
.tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.tgl + .tgl-btn:after,
.tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}
.tgl + .tgl-btn:after {
  left: 0;
}
.tgl + .tgl-btn:before {
  display: none;
}
.tgl:checked + .tgl-btn:after {
  left: 50%;
}

.tgl-ios + .tgl-btn {
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  border: 1px solid #e8eae9;
}
.tgl-ios + .tgl-btn:after {
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}
.tgl-ios + .tgl-btn:hover:after {
  will-change: padding;
}
.tgl-ios + .tgl-btn:active {
  box-shadow: inset 0 0 0 2em #e8eae9;
}
.tgl-ios + .tgl-btn:active:after {
  padding-right: 0.8em;
}
.tgl-ios:checked + .tgl-btn {
  background: #86d993;
}
.tgl-ios:checked + .tgl-btn:active {
  box-shadow: none;
}
.tgl-ios:checked + .tgl-btn:active:after {
  margin-left: -0.8em;
}
</style>
